<template>
  <div class="art-full-height">
    <ArtSearchBar
      v-model="searchForm"
      :items="formItems"
      :show-expand="true"
      @search="handleSearch"
      @reset="resetSearchParams"
    />

    <ElCard class="art-table-card" shadow="never">
      <ArtTableHeader
        v-model:columns="columnChecks"
        v-model:showSearchBar="showSearchBar"
        :loading="loading"
        @refresh="refreshData"
      >
      </ArtTableHeader>

      <ArtTable
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination="pagination"
        @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
      >
        <template #restPhoto="{ row }">
          <div v-if="row.restPhoto.length > 0" class="flex items-center gap-2">
            <ElImage
              :src="row.restPhoto[0].url"
              :preview-src-list="row.restPhoto.map((item: any) => item.url)"
              preview-teleported
              fit="cover"
              class="w-10 h-10"
            />
            <span v-if="row.restPhoto.length > 1" class="text-xs text-gray-500 ml-1">
              +{{ row.restPhoto.length - 1 }}张
            </span>
          </div>
          <span v-else class="no-image">暂无图片</span>
        </template>

        <template #restLongOpenFlag="{ row }">
          <ElTag :type="row.restLongOpenFlag === 2 ? 'success' : 'info'">
            {{ row.restLongOpenFlag === 2 ? '24小时' : row.restOpenTime }}
          </ElTag>
        </template>

        <template #restUpFlag="{ row }">
          <ElTag
            :style="{ color: row.restUpFlag === 1 ? '#fa896b' : '#13d1b9' }"
            :color="row.restUpFlag === 1 ? '#fdede8' : '#e7fcf8'"
          >
            {{ row.restUpFlag === 1 ? '隐藏' : '显示' }}
          </ElTag>
        </template>
      </ArtTable>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, h } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  import { useTable } from '@/composables/useTable'
  import ArtSearchBar from '@/components/core/forms/art-search-bar/index.vue'
  import ArtTable from '@/components/core/tables/art-table/index.vue'
  import { scoUserGoodsAdminPageDataUsingPost, GeoRestVo } from '@/api'
  import ArtButtonTable from '@/components/core/forms/art-button-table/index.vue'

  // 类型定义
  interface SearchForm {
    scoreName: string
  }

  interface ButtonMoreItem {
    key: string
    label: string
    icon?: any
    color?: string
    auth?: string
  }

  // 响应式数据
  const searchForm = ref<SearchForm>({
    scoreName: ''
  })

  // 搜索表单配置
  const formItems = computed(() => [
    {
      key: 'scoreName',
      label: '兑换点',
      type: 'input',
      props: {
        placeholder: '请输入兑换点名称',
        clearable: true
      }
    }
  ])

  // 使用 useTable 管理表格数据
  const {
    columns,
    columnChecks,
    data,
    loading,
    pagination,
    getData,
    searchParams,
    resetSearchParams,
    handleSizeChange,
    handleCurrentChange,
    refreshData
  } = useTable({
    core: {
      apiFn: scoUserGoodsAdminPageDataUsingPost,
      //
      apiParams: {
        body: {
          scoreName: searchForm.value.scoreName
        }
      },
      paginationWrapper: 'body', // 将分页参数包装到 body 对象中
      columnsFactory: () => [
        {
          prop: 'id',
          label: 'ID',
          minWidth: 80
        },
        {
          prop: 'scoreName',
          label: '商品名称',
          minWidth: 150
        },
        {
          prop: 'restAddress',
          label: '兑换点',
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'restPhoto',
          label: '用户信息',
          minWidth: 150,
          useSlot: true
        },
        {
          prop: 'restPhone',
          label: '联系方式',
          minWidth: 120,
          align: 'center',
          headerAlign: 'center'
        },
        {
          prop: 'restLongOpenFlag',
          label: '兑换时间',
          minWidth: 100,
          align: 'center',
          headerAlign: 'center',
          useSlot: true
        },

        {
          prop: 'operation',
          label: '操作',
          width: 100,
          fixed: 'right',
          align: 'center',
          headerAlign: 'center',
          formatter: (row) => {
            return h('div', {}, [
              h(ArtButtonTable, {
                type: 'view',
                onClick: () => buttonMoreClick({ key: 'view', label: '查看' }, row),
                title: '查看'
              })
            ])
          }
        }
      ]
    },
    hooks: {
      onSuccess: (tableData: GeoRestVo[]) => {
        data.value = tableData.map((item: GeoRestVo) => {
          item.restPhoto = JSON.parse(item.restPhoto || '[]')
          return item
        })
      }
    }
  })

  const showSearchBar = ref(false)

  const handleSearch = () => {
    searchParams.body.scoreName = searchForm.value.scoreName
    getData()
  }

  const buttonMoreClick = async (item: ButtonMoreItem, row: GeoRestVo) => {
    switch (item.key) {
      case 'view':
        router.push({
          name: 'stationDetail',
          query: { id: row.id }
        })
        break
    }
  }
</script>

<style lang="scss" scoped>
  .services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .service-tag {
    margin: 2px;
  }

  .no-image {
    font-size: 12px;
    color: rgb(var(--art-text-gray-500));
  }
</style>
